<template>
  <!-- 公共组件 投放日历,上门回收,垃圾识别，每日签到 -->
  <div class="id">
    <img class="BeiJing" src="../../img/首页/u19.png" alt="" />
    <!-- 头部 -->
    <div class="head">
      <span @click="Exit"><van-icon name="arrow-left" /></span>
      <span>{{ name }}</span>
    </div>
    <!-- 投放日历 -->

    
    <div>
      <!-- 日历 -->
      <div class="Calendar">
        <van-calendar
          class="Cale"
          :show-subtitle="false"
          :show-title="false"
          title="日历"
          :poppable="false"
          :show-confirm="false"
          :row-height="50"
          :show-mark="true"
          :style="{ height: '300px' }"
        />
      </div>
      <!-- 今日投放 -->
      <div class="box">
        <div class="LaunchedToday"  :v-model="date">
          <p>
            <span>投放日期 {{ time2 }}</span>
          </p>
          <p>
            <span>{{ TodayTime }}</span> <span>{{ TodayName }}</span>
          </p>
          <p>
            <span>{{ TodayTime1 }}</span> <span>{{ TodayName1 }}</span>
          </p>
        </div>
      </div>
      <!-- 明日投放 -->
      <div
        class="LaunchTomorrow"
        v-for="(item, index) in arr"
        :key="index"
        v-show="flag"
      >
        <p>
          <span>投放日期 {{ time3 }}</span>
        </p>
        <p>
          <span>{{ TomorrowTime }}</span
          ><span>{{ TomorrowName }}</span>
        </p>
        <p>
          <span>{{ TomorrowTime1 }}</span
          ><span>{{ TomorrowName1 }}</span>
        </p>
      </div>

      <!-- 弹出层修改日期 -->
      <van-cell class="xiuGai" title="+" v-model="data" @click="show = true" />
      <van-calendar v-model:show="show" @confirm="onConfirm" />
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";

// 激活路由
const router = useRouter();
// 激活活跃路由
const route = useRoute();
const data = defineProps({
  name: {
    type: String,
    default: "2022年12月",
  },
  TodayTime: {
    type: String,
    default: "8:00-9:00",
  },
  TodayName: {
    type: String,
    default: "湿垃圾",
  },
  TodayTime1: {
    type: String,
    default: "17:00-20:00",
  },
  TodayName1: {
    type: String,
    default: "干垃圾",
  },
  TomorrowTime: {
    type: String,
    default: "7:00-9:00",
  },
  TomorrowName: {
    type: String,
    default: "湿垃圾",
  },
  TomorrowTime1: {
    type: String,
    default: "18:00-21:00",
  },
  TomorrowName1: {
    type: String,
    default: "干垃圾",
  },
});
// 点击返回
const Exit = () => {
  router.go(-1);
};
// 当前时间
// const Time = new Date();
// console.log(Time);
// const data1 = JSON.stringify(data);
// window.localStorage.setItem("data1", data1);

const flag = ref(false);

// 弹出层修改日期
const date = ref("");
const show = ref(false);

// 获取当前时间
const time1 = new Date()
const time2 = ref("")
time2.value = `${time1.getMonth() + 1}.${time1.getDate()}`
// console.log(time2.value)


const formatDate = (date) => `${date.getMonth() + 1}.${date.getDate()}`;

const arr = ref([
{time:""}
]);
const arr1 = ref([]);
const onConfirm = (value) => {
  show.value = false;
  date.value = formatDate(value);
  time3.value = date.value

  window.localStorage.setItem("arr", date.value);

};

const time3 = ref(`${time1.getMonth() + 1}.${time1.getDate() + 1}` )

const fun = () => {
  if (localStorage.arr !== undefined) {
    flag.value = true;

  } else {
    flag.value = false;

  }
};
fun();

arr1.value = localStorage.arr;
// console.log(arr1.value);
</script>

<style lang="less" scoped>
// .box{
//   height: 100vh;

// }
.xiuGai {
  width: 50px;
  height: 50px;
  line-height: 30px;
  font-size: 50px;
  font-weight: 600;
  text-align: center;
  color: #fff;
  background-color: #3ed2e2;
  border-radius: 25px;
  text-indent: -5px;
  position: fixed;
  top: 600px;
  left: 301px;
}
.BeiJing {
  width: 100%;
}
.head {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 20px;
  color: #ffffff;
  span:nth-of-type(1) {
    margin-right: 10px;
  }
}
.Calendar {
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  position: absolute;
  top: 90px;
  left: 20px;
  right: 20px;
  height: 300px;
  border-radius: 10px;
  .Cale {
    border-radius: 10px;
  }
}
.LaunchedToday {
  border-radius: 2.667vw;
  padding-top: 2.667vw;
  padding-left: 1.333vw;
  position: relative;
  top: 50vw;
  left: 5.167vw;
  height: 26vw;
  width: 88.667vw;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  margin: 10px 0px;
  p:nth-of-type(1) {
    margin-bottom: 2.967vw;
    span {
      border-left: 1vw solid red;
      padding-left: 4vw;
      font-weight: 700;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
    }
  }
  p:nth-of-type(2) {
    padding-left: 5vw;
    margin-bottom: 2.967vw;
    span {
      padding-right: 10vw;
      font-weight: 600;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
      color: #999999;
    }
  }
  p:nth-of-type(3) {
    padding-left: 5vw;
    span {
      padding-right: 5vw;
      font-weight: 600;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
    }
  }
}
.LaunchTomorrow {
  border-radius: 2.667vw;
  padding-top: 2.667vw;
  padding-left: 1.333vw;
  position: relative;
  top: 50vw;
  left: 5.167vw;
  height: 26vw;
  width: 88.667vw;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  p:nth-of-type(1) {
    margin-bottom: 2.967vw;
    span {
      border-left: 1vw solid rgba(43, 205, 221, 1);
      padding-left: 4vw;
      font-weight: 700;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
    }
  }
  p:nth-of-type(2) {
    padding-left: 5vw;
    margin-bottom: 2.967vw;
    span {
      padding-right: 10vw;
      font-weight: 600;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
      color: #999999;
    }
  }
  p:nth-of-type(3) {
    padding-left: 5vw;
    span {
      padding-right: 5vw;
      font-weight: 600;
      font-family: "微软雅黑 Bold", "微软雅黑";
      font-size: 3.733vw;
      text-align: left;
    }
  }
}
</style>
